Web Imaging Formats

File Formats

The most commonly found image file formats are:

  • BMP
    • Not supported everywhere
    • Not compressed
  • GIF
    • Supports animation
    • 8bit color (256 color)
    • Supports Transparency (non alpha)
    • Lossless Compression
      • Does not loose resolution
  • PNG
    • Supports Alpha Transparency
    • Gaining popularity for photos
      • Does not loose as much resolution
  • JPG
    • Supports Compression
    • Not scalable (looses resolution)
    • Lossy Compression
      • reduces file size by loosing some resolution
  • TIFF
    • Supports Compression
    • Holds most of the resolution data compared to other formats
  • SVG (scalable vector graphics)
    • Are not resolution dependent
    • Supports re-scaling
  • RAW
    • Contains all information that creates the picture but by itself is not the actual photo
    • Requires application to read the data
      • Not all RAW formats are the same so specific applications required

 

Image Resolution

Image quality depends on the display size. For example on mobile devices the dimensions might be less than a 1000 pixels whereas on larger high resolution displays the pixel counts could be several thousands. Image hosting sites (like flickr) will store multiple copies of images. Based on the display size the appropriate image file is loaded. Large images obviously have large file size and may affect performance.

 

Vector vs Rastor

Rastor images are just instructions on how the picture is composed, for example what pixels go where and with what color. But as these images scale (for example zoom) the computer needs to guess how to fill in the new pixels (that are in the zoom).

Vector images are more like functions of how the image is drawn. For example it defines where to draw lines, circles, etc. It is based on shape patterns, and therefore taking Rastor images to Vector often looses the original image’s resolution.